<template>
  <!-- 车辆信息表单 -->
  <el-form
    :inline="true"
    ref="formData"
    :model="formData"
    :rules="rules"
    label-width="100px"
    label-position="right"
  >
    <el-row>
      <el-col :span="12">车辆信息</el-col>
    </el-row>
    <el-divider content-position="center"></el-divider>
    <el-row>
      <el-col :span="6">
        <el-form-item label="送修人:" prop="type" style="width: 292px">
          <el-radio-group v-model="formData.giveType" :disabled="disabled">
            <el-radio-button :label="0">车主</el-radio-button>
            <el-radio-button :label="1">他人</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="送修人姓名:" prop="sendRepairName">
          <el-input clearable v-model="formData.sendRepairName" :disabled="disabled" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="联系方式:" prop="sendRepairPhone">
          <el-input clearable v-model="formData.sendRepairPhone" :disabled="disabled" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="服务接待:" prop="receptionName">
          <el-input clearable v-model="formData.receptionName" :disabled="disabled" @focus="employeeFocus()" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="车牌号:" prop="licensePlateNumber">
          <el-input clearable v-model="formData.clientCar.licensePlateNumber" :disabled="disabled" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车型:" prop="carModels">
          <CarModel v-if="showCarModel" v-model="carModels" ref="carModel" :disabled="disabled" placeholder="车型组件" />
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="VIN:" prop="vin">
          <el-input clearable v-model="formData.clientCar.vin" :disabled="disabled" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="入厂里程数:" prop="inFactoryMileage">
          <el-input clearable v-model="formData.inFactoryMileage" :disabled="disabled" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="入场油量:" prop="inFactoryOil">
          <OilNum v-model="formData.inFactoryOil" :disabled="disabled" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="接车时间:" prop="receiveCarTime">
          <el-date-picker
            v-model="formData.receiveCarTime"
            type="date"
            style="width: 195px"
            :disabled="disabled"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="visible"
      width="1300px"
      title="服务接待列表"
      @close="dialogClose"
    >
      <EmployeeTable
        @roleIdListSelectCheck="employeListSelectCheck"
        :checkList="[formData.manageUserName]"
      />
    </el-dialog>
  </el-form>
</template>
<script>
import { OilNum, CarModel } from "@/components/index"; //导入组件库
import { rapidGetWorkOrderCode } from "@/api/after-sale/workOrderManage/fast"; //快速单api
import { washGetWorkOrderCode } from "@/api/after-sale/workOrderManage/car-wash"; //洗车单api
import { getDict, objectAssignment, getUser } from "@/utils";
import EmployeeTable from "../../../systemManage/store/components/EmployeeTable";
export default {
  components: {
    OilNum,
    CarModel,
    EmployeeTable,
  },
  props: {
    formValue: {
      type: Object,
      default: () => {
        return {};
      },
    },
    workOrderType: {
      type: Number,
      default: 1, //1 快速单 2 综合单
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        giveType: 0, //	boolean送修人0-车主 1-他人
        inFactoryMileage: "", //	integer($int32)入厂里程
        inFactoryOil: 0, //	integer($int32)入场油量
        receiveCarTime: "", //	string($date-time)接车日期
        receptionName: "", //	string服务接待
        sendRepairName: "",
        sendRepairPhone: "",
        clientCar: {},
      },
      dict: {}, //字典
      carModels: [], //车型数组
      visible: false,
      showCarModel: false,
      rules: {
        sendRepairName: [{ required: true, message: "请输入", trigger: "blur" }],
        sendRepairPhone: [{ required: true, message: "请输入", trigger: "blur" }],
        receptionName: [{ required: true, message: "请输入", trigger: "blur" }],
        // licensePlateNumber: [{required: true,message: '请输入',trigger: 'blur',},],
        // carModelId: [{required: true,message: '请输入',trigger: 'blur',},],
        inFactoryMileage: [{ required: true, message: "请输入", trigger: "blur" }],
        inFactoryOil: [{ required: true, message: "请输入", trigger: "blur" }],
        receiveCarTime: [{ required: true, message: "请输入", trigger: "blur" }],
        carModels: [{ required: true, message: "请选择车型", trigger: "blur" }],
      }, //表单校验
    };
  },
  watch: {
    formValue: {
      deep: true,
      handler(newValue, oldValue) {
        this.formData = {...newValue};
        if (this.formData.clientCar) {
          const {carBrandId, carSeriesId, timeType, carModelId } = this.formData  && this.formData.clientCar;
          this.carModels = [carBrandId, carSeriesId, timeType, carModelId ];
        } else {
          const {carBrandId, carSeriesId, timeType, carModelId } = this.formData;
          this.carModels = [carBrandId, carSeriesId, timeType, carModelId ];
        }
        this.formData.giveType =  this.formData.giveType ? 1 : 0;
        setTimeout(()=> {
          this.showCarModel = true;
        },100)
      },
    }
  },
  methods: {
    //打开员工选择列表
    employeeFocus() {
      console.log(111);
      this.visible = true;
    },
    dialogClose() {
      this.visible = false;
    },
    //员工选择
    employeListSelectCheck(select) {
      this.formData.receptionName = select[0].userName;
      this.formData.receptionId = select[0].id;
      this.visible = false;
    },
  },
  async created() {
    this.dict = getDict(["服务接待"]);
    //工单类型为3时 编号生成有工单信息模块生成
    if (this.workOrderType !== 3) {
      //获取工单编号
      let { data } =
        this.workOrderType == 2
          ? await washGetWorkOrderCode()
          : await rapidGetWorkOrderCode();
      this.formData.workOrderCode = data;
    }
  },
  mounted() {
    let user = getUser();
    this.formData.receptionName = user.name;
    this.formData.receptionId = user.id;
  },
};
</script>
